<template>
  <div class="UserList">
    <el-card>
      <div class="user_top">
        <el-form :inline="true" :model="userSelQuery" class="demo-form-inline">
          <el-form-item label="手机号">
            <el-input
              v-model="userSelQuery.phone"
              placeholder="请输入手机号"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="日期:">
            <el-date-picker
              v-model="value1"
              type="datetimerange"
              align="right"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getuserSerach">搜索</el-button>
            <el-button type="success" @click="handlershowAdd"
              >新增用户</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 表哥 -->
      <el-table :data="userSelList" border style="width: 95%; margin: 0 auto">
        <el-table-column prop="no" label="序号"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="130">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.userName == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.userName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="petName" label="昵称" width="130">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.petName == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.petName }}</span>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="ipLogin" label="登录ip" width="130">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.ipLogin == ''" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.ipLogin }}</span>
            </div>
          </template>
        </el-table-column> -->
        <el-table-column prop="phone" label="手机号" width="180">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.phone == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.phone }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="create_date" label="创建时间" width="200">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.create_date == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.create_date }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="update_date"
          label="最近一次登录时间"
          width="200"
        >
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.update_date == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.update_date }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="所属公司" width="230">
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.companyName == null" style="color: red"
                >暂无数据</span
              >
              <el-link :underline="false" type="success" v-else>{{
                scoped.row.companyName
              }}</el-link>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="admin" label="是否是总后台端用户" width="160">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.admin == 1" type="success">是</el-tag>
              <el-tag v-else-if="scoped.row.admin == 2">不是</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="employee" label="是否是商户端用户" width="150">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.employee == 1" type="success">是</el-tag>
              <el-tag v-else-if="scoped.row.employee == 2">不是</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="worker" label="是否是服务端用户" width="150">
          <template slot-scope="scoped">
            <div>
              <el-tag v-if="scoped.row.worker == 1" type="success">是</el-tag>
              <el-tag v-else-if="scoped.row.worker == 2">不是</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150" fixed="right">
          <template slot-scope="scoped">
            <div>
              <el-button
                type="danger"
                size="mini"
                :disabled="
                  scoped.row.employee === 1 ||
                    scoped.row.worker === 1 ||
                    scoped.row.admin === 1
                "
                @click="handlerDel(scoped.row)"
                >删除</el-button
              >
              <el-button
                type="warning"
                size="mini"
                @click="handlershowEdit(scoped.row)"
                >编辑</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加用户的弹框 -->
      <el-dialog
        :title="adduser"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="userAddRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="昵称" prop="petName">
            <el-input
              v-model="ruleForm.petName"
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <el-form-item label="真实姓名" prop="realName">
            <el-input
              v-model="ruleForm.realName"
              placeholder="请输入真实姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="ruleForm.phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="ruleForm.password"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handlerSure">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <div class="pagination" style="margin-bottom: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="userSelQuery.pageSize"
          :current-page="userSelQuery.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { userSel, userDel, userAdd, userUpdate } from "../../utils/api";
export default {
  data() {
    const validatePhone = (rule, value, callback) => {
      const reg = /^1\d{10}$/;
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      // 普通用户列表
      userSelList: [],
      //   分页数据
      userSelQuery: {
        pageNumber: 1,
        pageSize: 10,
        startTime: "",
        endTime: "",
        phone: ""
      },
      //   总条数
      count: 0,
      //   时间
      value1: null,
      // 是否禁用
      diabledBtn: true,
      //   showBtn: false
      adduser: "新增用户",
      dialogVisible: false,
      ruleForm: {
        petName: "", //昵称
        realName: "", //真实姓名
        phone: "",
        password: "",
        id: ""
      },
      rules: {
        petName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" }
        ],
        phone: [
          { required: true, validator: validatePhone, trigger: "change" }
        ],

        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  created() {
    this.getuserSelList();
  },
  methods: {
    //   获取用户列表
    getuserSelList() {
      this.postRequest(userSel, this.userSelQuery).then(res => {
        if (res.code == 200) {
          this.userSelList = res.data.data;
          this.count = res.data.count;
        }
      });
    },
    getuserSerach() {
      this.userSelQuery.pageNumber = 1;
      this.getuserSelList();
    },
    // 点击新增用户显示探矿
    handlershowAdd() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 点击编辑显示弹框
    handlershowEdit(row) {
      this.adduser = "编辑用户";
      this.dialogVisible = true;
      this.ruleForm.petName = row.petName;
      this.ruleForm.realName = row.realName;
      this.ruleForm.phone = row.phone;
      this.ruleForm.password = row.enablePassword;
      this.ruleForm.id = row.id;
    },
    // 点击更新用户
    handlerUpdate() {
      this.postRequest(userUpdate, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑用户成功");
          this.dialogVisible = false;
          this.getuserSelList();
        }
      });
    },
    // 新增用户
    handlerAdd() {
      this.postRequest(userAdd, this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("新增用户成功");
          this.dialogVisible = false;
          this.getuserSelList();
        }
      });
    },
    // 点击确定判断是新增用户还是编辑用户
    handlerSure() {
      this.$refs["userAddRef"].validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.adduser == "新增用户") {
          this.handlerAdd();
        } else {
          this.handlerUpdate();
        }
      });
    },
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false;
      this.ruleForm.petName = "";
      this.ruleForm.realName = "";
      this.ruleForm.phone = "";
      this.ruleForm.password = "";
      this.ruleForm.id = "";
    },
    // 点击选择时间调用的函数
    changeTime(value) {
      if (this.value1 == "" || this.value1 == null || this.value1 == []) {
        this.userSelQuery.startTime = "";
        this.userSelQuery.endTime = "";
      } else {
        this.userSelQuery.startTime = value[0];
        this.userSelQuery.endTime = value[1];
      }
    },
    // 分页
    handleSizeChange(val) {
      this.userSelQuery.pageSize = val;
      this.getuserSelList();
    },
    handleCurrentChange(val) {
      this.userSelQuery.pageNumber = val;
      this.getuserSelList();
    },
    // 点击删除
    handlerDel(data) {
      if (data.admin == 2 && data.employee == 2 && data.worker == 2) {
        const params = {
          id: data.id,
          userId: window.sessionStorage.getItem("userId")
        };
        this.$confirm("您确定要删除此账号吗?, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.postRequest(userDel, params).then(res => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "删除用户成功!"
                });
                this.getuserSelList();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
        this.diabledBtn = true;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.UserList {
  background: #ffffff;
  .user_top {
    margin-left: 35px;
  }
}
</style>
